import {defineComponent, PropType} from 'vue';

import {MD} from './markdown';
import type {
  MdcTable
} from './process/processTableString';

export const MdcTableComponent = defineComponent({
  props: {
    content: {type: Object as PropType<MdcTable>, required: true}
  },
  setup(props){
    let {
      content,
      desc,
      tableType,
      title
    } = props.content;

    if(!!desc) content = `${desc.trim()}\n${content}`;

    return () => (
      <div class={`md-plus-table md-plus-table--${tableType}`}>
        <h2>API: {title}</h2>
        <MD content={content}/>
      </div>
    )
  }
})
